<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!-- Base Css Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/fontello/css/fontello.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/animate-css/animate.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/css/component.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" /> 
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style-responsive.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro.css" rel="stylesheet" type="text/css" />
        
        <!-- Extra CSS Files -->
      	<link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-validator/css/bootstrapValidator.min.css" rel="stylesheet"/>
      	
        <!-- Custom Css Files -->
        <link href="__HOME_CSS__/style.css"  rel="stylesheet" />
    </head>
    <body>
	<!-- Begin page -->
	<div>
		<div class="sub-header-title">
			<h2>
				银行卡快捷支付
			</h2>
		</div>


	<!-- End of page -->
	<div class="row">
		<div class="col-md-12 portlets">
			<!-- Your awesome content goes here -->
			<div class="widget animated fadeInDown">
				<form id="myWizard">
					<section class="step" data-step-title="输入银行卡号">
						<div class="row form-horizontal">
							<!--<div class="col-sm-6">-->
								<div class="form-group">
									<label for="bank_no" class="col-sm-2 control-label"><span class="red_star">*</span>银行卡号</label>
									<div class="col-sm-5">
										<input type="text" id="bank_no" placeholder="请输入银行卡号" name="bank_no" class="form-control" onblur="card()"  required>
									</div>
									<div class="col-sm-5">
										<p class="help-block">输入银行卡号</p>
									</div>
								</div>
							<!--</div>-->
						</div>
					</section>
					<section class="step" data-step-title="提交个人信息">
						<div class="row form-horizontal">
								<div class="form-group">
									<label class="col-sm-2 control-label">银行卡号</label>
									<div class="col-sm-5">
										<input type="text" class="form-control"  name="bank_no_show" readonly>
									</div>
									<div class="col-sm-5">
										<p class="help-block">银行卡号</p>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="red_star">*</span>姓名</label>
									<div class="col-sm-5">
										<input type="text" class="form-control owner"  name="owner" value=""  onblur="info(this)" required>
									</div>
									<div class="col-sm-5">
										<p class="help-block">银行卡开户姓名</p>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="red_star">*</span>身份证号</label>
									<div class="col-sm-5">
										<input type="text" class="form-control cert_no"  name="cert_no" value="" onblur="info(this)" required>
									</div>
									<div class="col-sm-5">
										<p class="help-block">有效身份证号</p>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label"><span class="red_star">*</span>手机号</label>
									<div class="col-sm-5">
										<input type="text" class="form-control phone"  name="phone" value="" onblur="info(this)" required>
									</div>
									<div class="col-sm-5">
										<p class="help-block">银行预留手机号</p>
									</div>
								</div>
								<div class="form-group hidden" >
									<label class="col-sm-2 control-label"><span class="red_star">*</span>cvv2</label>
									<div class="col-sm-5">
										<input type="text" class="form-control cvv2"  name="cvv2" value="" onblur="info(this)" >
									</div>
									<div class="col-sm-5">
									<p class="help-block">提示：卡背面三位数字</p>
									</div>
								</div>
								<div class="form-group hidden">
									<label class="col-sm-2 control-label"><span class="red_star">*</span>卡有效期</label>
									<div class="col-sm-5">
										<input type="text" class="form-control validthru"  name="validthru" value="" onblur="info(this)" >
									</div>
									<div class="col-sm-5">
										<p class="help-block">提示：格式为月年（MMyy|例如0117）</p>
									</div>
								</div>
						</div>
					</section>
					<section class="step" data-step-title="提交">
						<div class="row form-horizontal">
							<div class="col-sm-12">
								<div class="form-group">

									<label for="check_code" class="col-sm-2 control-label"><span class="red_star">*</span>短信验证码</label>
									<div class="col-sm-5">
									<input type="text" id="check_code"  name="check_code" class="form-control">
										</div>
									<div class="col-sm-5">
									<button type="button" class="btn btn-success " id="btns">重新发送</button>
										</div>
								</div>
							</div>
						</div>
					</section>
				</form>
			</div>
		</div>
	</div>
	</div>
	<!-- Base Js Files -->
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery/jquery-1.11.1.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/js/bootstrap.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-ui-touch/jquery.ui.touch-punch.min.js"></script>
 	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-detectmobile/detect.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/fastclick/fastclick.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-slimscroll/jquery.slimscroll.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/classie.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/modalEffects.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/notify.min.js"></script>
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.min.js"></script>
	
	<!-- Extra Js Files -->
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-validator/js/bootstrapValidator.min.js"></script>
	<!-- Page Specific JS Libraries -->
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-wizard/jquery.easyWizard.js"></script>
	<!-- Custom Js Files -->
	<script src="__HOME_JS__/common.js"></script>
	<!-- Custom Js Files -->
	<script src="__PUBLIC_JS__/sha1.js"></script>
	<script>

		var bank_name='';
		var bank_card_type='';
		var cvv2='';
		var validthru='';
		var order_no='';
		var bank_no='';
		var payId={$payId};
		function card(){
			var reg = /^\d{16,19}$/g;
			bank_no = $('input[name=bank_no]').val();
			if(!reg.test(bank_no)){
				$('#bank_no').css('border-color','#a94442');
			}else {
				$('#bank_no').css('border-color','');
			}
		}
		function info(_this){
			if(_this.name=='owner'){
				var regName =/^[\u4E00-\u9FA5]{2,5}$/;
				if(!regName.test(_this.value)){
					$(_this).css('border-color','#a94442');
				}else{
					$(_this).css('border-color','');
				}
			}else if(_this.name=='cert_no'){
				var regName =/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(!regName.test(_this.value)){
					$(_this).css('border-color','#a94442');
				}else{
					$(_this).css('border-color','');
				}
			}else if(_this.name=='phone'){
				var regName =/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
				if(!regName.test(_this.value)){
					$(_this).css('border-color','#a94442');
				}else{
					$(_this).css('border-color','');
				}
			}else if(_this.name=='cvv2'){
				var regName =/^(\d{3})$/;
				if(!regName.test(_this.value)){
					$(_this).css('border-color','#a94442');
				}else{
					$(_this).css('border-color','');
				}
			}else if(_this.name=='validthru'){
				var regName =/^(\d{4})$/;
				if(!regName.test(_this.value)){
					$(_this).css('border-color','#a94442');
				}else{
					$(_this).css('border-color','');
				}
			}
		}
		$(function() {
			$('#myWizard').easyWizard({
				buttonsClass: 'btn btn-success',
				submitButtonClass: 'btn btn-success',
				before: function(wizardObj, currentStepObj, nextStepObj) {
					if(wizardObj.find('.current').attr('data-step')==1){
						var reg = /^\d{16,19}$/g;
						bank_no = $('input[name=bank_no]').val();
						if(!reg.test(bank_no)){
							window.parent.layer.msg('请输入正确的银行卡号');
							return false;
						}
						if(bank_no){
							$.ajax({
								type: "GET",
								url: "{:U('Cash/queryBankCardResult')}",
								data: {'bank_no':bank_no},
								dataType: "json",
								async:false,
								success: function(response){
									if(response.status){
										bank_card_type = response.bank_card_type;
										bank_name = response.bank_name;
										if(bank_card_type==0){
											var cardVal = bank_no+'(储蓄卡)';
										}else{
											var cardVal = bank_no+'(信用卡)';
										}
										$('input[name=bank_no_show]').val(cardVal);
										if(bank_card_type==1){
											$('.hidden').removeClass('hidden');
										}
										return true;
									}else {
										//弹出提示
										window.parent.layer.msg(response.message);
										return false;
									}
								},
								error:function(){
									window.parent.layer.msg('请求错误');
									return false;
								}
							});
							if(bank_name){
								return true;
							}else {
								return false;
							}

						}else {
							return false;
						}
					}else if(wizardObj.find('.current').attr('data-step')==2)
					{
						var owner= $('.owner').val();
						var cert_no = $('.cert_no').val();
						var phone = $('.phone').val();
						if(!owner||!cert_no||!phone){
							window.parent.layer.msg('请填写完整信息');
							return false;
						}
						if(bank_card_type==1){
							 validthru = $('.validthru').val();
							 cvv2 = $('.cvv2').val();
							if(!validthru||!cvv2){
								window.parent.layer.msg('请填写完整信息');
								return false;
							}
						}
						$.ajax({
							type: "POST",
							url: "{:U('Cash/debit')}",
							data: {'bank_no':bank_no,'bank_card_type':bank_card_type,'owner':owner,'cert_no':cert_no,'phone':phone,'bank_name':bank_name,'payId':payId,'validthru':validthru,'cvv2':cvv2},
							dataType: "json",
							async:false,
							success: function(response){
								if(response.status){
									order_no = response.order_no;
									return true;
								}else {
									//弹出提示
									window.parent.layer.msg(response.message);
									return false;
								}
							},
							error:function(){
								window.parent.layer.msg('请求错误');
								return false;
							}
						});
						if(order_no){
							return true;
						}else
						{
							return false;
						}

					}
				},
				beforeSubmit: function(wizardObj) {

					var reg = /^\d{4,10}$/g;
					var check_code = $('#check_code').val();
					if(!reg.test(check_code)){
						window.parent.layer.msg('请输入正确验证码');
						return false;
					}
					$.ajax({
						type: "POST",
						url: "{:U('Cash/confirm')}",
						data: {'check_code':check_code,'order_no':order_no},
						dataType: "json",
						async:false,
						success: function(response){
							if(response.status){
								window.parent.layer.msg('充值成功');
								location.href="{:U('Cash/payList')}";
								return false;
							}else {
								//弹出提示
								window.parent.layer.msg(response.message);
								return false;
							}
						},
						error:function(){
							window.parent.layer.msg('请求错误');
							return false;
						}
					});
					return false;
				}
			});
		});

		var wait=60;
		function time(o) {
			if (wait == 0) {
				o.removeAttribute("disabled");
				o.innerHTML="重新发送";
				wait = 60;
			} else {
				o.setAttribute("disabled", true);
				o.innerHTML="重新发送(" + wait + ")";
				wait--;
				setTimeout(function() {
							time(o);
						},
						1000);
			}
		}
		document.getElementById("btns").onclick=function(){
			time(this);
			$.ajax({
				type: "POST",
				url: "{:U('Cash/reSendSmsResult')}",
				data: {'order_no':order_no},
				dataType: "json",
				success: function(response){
					if(!response.status)
					{
                     //弹出提示
						window.parent.layer.msg(response.message);
					}
				}
			});
		};
	</script>
	</body>
</html>